<template>
    <div>
        <van-nav-bar title="自助取号" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
            <div style="
        width:100%;
        height: 45px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        ">
                <div>
                    <span style="margin-left: 20px;">{{ ii.name }}</span>
                    <span style="margin-left: 20px;">{{ ii.ma }}</span>
                </div>
                <div style="
                display: flex;
                " @click="g4">
                    <img style="
                    width: 20px;
                    height: 20px;
                    margin-left: 115px;
                    margin-top: 15px;
                    " src="https://cdn7.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg"
                        alt="">
                    <p style="
                        margin-left: 2px;
                    ">切换</p>
                </div>

            </div>

            <div style="
        width:100%;
        height: 40px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 40px;
        display: flex;
        ">
                <button @click="flagsw" :class="flags == true ? 'activd1d1e' : 'qwe111rg41'">待取号</button>
                <button @click="flagsw1" :class="flags == false ? 'activ1d1d1e' : 'qwerg41'">已取号</button>
            </div>

            <div v-if="flags">
                <div 
                
                style="
                          width:88%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          ">
                    <div>
                        <div style="
                             display: flex;
                             ">
                            <div>
                                <img style="
                                                width:45px;
                                                height: 45px;
                                                "
                                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                    alt="">
                            </div>
                            <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                                <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">刘医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                                <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#1F1F1F;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                            </div>
                        </div>
                        <div style="
                                        display: flex;
                                        width: 130px;
                                        justify-content: space-between;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">就诊人</p>
                            <p style="font-size:14px;">王小柯</p>

                        </div>
                        <div style="
                                        display: flex;
                                        width: 295px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">预约时间</p>
                            <p style="font-size:14px;">2020-01-27 08:30-12:00（上午）</p>

                        </div>
                        <button style="
                        width:100px;
                        height: 35px;
                        line-height: 35px;
                        text-align: center;
                        font-size: 14px;
                        color:#FFFFFF;
                        background-color: #1677ff;
                        border-radius: 6px;
                        border:0;
                        float: right;
                        "
                        @click="sjdfiosjoafj"
                        >去取号</button>
                    </div>

                </div>
            </div>
            <div v-if="!flags">
                <div
                
                 style="
                          width:88%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          ">
                    <div>
                        <div style="
                             display: flex;
                             ">
                            <div>
                                <img style="
                                                width:45px;
                                                height: 45px;
                                                "
                                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                    alt="">
                            </div>
                            <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                                <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">刘医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                                <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#1F1F1F;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                            </div>
                        </div>
                        <div style="
                                        display: flex;
                                        width: 130px;
                                        justify-content: space-between;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">就诊人</p>
                            <p style="font-size:14px;">王小柯</p>

                        </div>
                        <div style="
                                        display: flex;
                                        width: 175px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">预约号</p>
                            <p style="font-size:14px;">20200101020</p>

                        </div>
                        <div style="
                                        display: flex;
                                        width: 295px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">预约时间</p>
                            <p style="font-size:14px;">2020-01-27 08:30-12:00（上午）</p>

                        </div>
                           <div style="
                                        display: flex;
                                        width: 250px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">就诊地点</p>
                            <p style="font-size:14px;">南苑门诊大楼二楼520诊室</p>

                        </div>
                        <button style="
                        width:299px;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        font-size: 14px;
                        background-color: rgba(242, 242, 242, 1);
                        border-radius: 8px;
                        border:0;
                        ">排队号：20</button>
                    </div>

                </div>
            </div>


        </div>
    </div>

    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
        <div style="
        margin-top: 10px;
                    ">
            <h3 style="
        text-align: center;
        ">选择就诊人</h3>
            <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
            <div style="
        width:90%;
        height: 45px;
        background-color: #e6f4ff;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        margin-left: 20px;
        " v-for="(i, index) in renmen" :key="index" @click="dian(i)">
                <span style="margin-left: 20px;">{{ i.name }}</span>
                <span style="margin-left: 20px;">{{ i.ma }}</span>
            </div>



        </div>

    </van-popup>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const cesi= ref(true)

const router = useRouter()
const de90 = () => {
    router.push("/Q1")
}
const sdf23 = () => {
    router.push("/Q2")
}

const showBottom = ref(false)

const renmen = ref([
    {
        name: "王小轲",
        ma: "2015*****10"
    },
    {
        name: "李玲玲",
        ma: "2015*****11"
    },
])
const ii = ref({
    name: "王小轲",
    ma: "2015*****10"
})
let flags = ref(true)
const flagsw = () => {
    flags.value = true
}
const flagsw1 = () => {
    flags.value = false
}
const dian = (i: any) => {
    ii.value = i
    showBottom.value = false

}


const onClickLeft = () => {
    router.push("/Home")
}


const g4 = () => {
    showBottom.value = true
}
const sjdfiosjoafj = () => {
    router.push("/QuQuHao")
}





</script>

<style scoped>
.qwerg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: white;
    color: black;
}

.activ1d1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.qwe111rg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    color: black;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.activd1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
</style>